<template>
    <div class="card-box">
        <el-row>
            <el-col :span="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="选择运营商账号：" prop="category" class="mt_5">
                        <el-select v-model="formInline.category" filterable placeholder="请选择" class="select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :md="4" class="float-right">
                <el-form>
                    <el-button type="primary" @click="dialogVisible = true">支付上海电信</el-button>
                </el-form>
            </el-col>
            <Pay :dialogVisible="dialogVisible" @dialogColse="dialogColse"/>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column
            label="数据更新时间"
            width="160"
            >
                <template slot-scope="scope">
                    {{ scope.row.date}}
                </template>
            </el-table-column>
            <el-table-column prop="liushuinum" label="流水号" width="210">
            </el-table-column>
            <el-table-column prop="iccid" label="ICCID" width="180">
            </el-table-column>
            <el-table-column prop="month" label="订购月份" width="100">
            </el-table-column>
            <el-table-column prop="carrier_product" label="运营商产品" width="150">
            </el-table-column>
            <el-table-column prop="product_price" label="产品价格" width="80">
            </el-table-column>
            <el-table-column prop="num" label="数量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="金额" width="80">
            </el-table-column>
            <el-table-column prop="qianfee" label="欠费">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import Pay from '@/base/pay/pay'
    export default {
        data() {
            return {
                dialogVisible: false,
                formInline: {
                    category: ''
                },
                options: [{
                    value: '选项1',
                    label: '吴开来'
                }, {
                    value: '选项2',
                    label: '南通塔杨信息科技有限公司'
                }],
                tableData: [
                    {
                        date: '2018-06-21 12:25:21',
                        liushuinum: '201806211225210081101979',
                        iccid: 8986031642202275661,
                        month: '当月',
                        carrier_product: '5M／月流量包',
                        product_price: 0.2,
                        num: 33,
                        price: 0.07,
                        qianfee: 7.47
                    },
                    {
                        date: '2018-05-21 12:25:21',
                        liushuinum: '201806211225217881101979',
                        iccid: 8986031642202275661,
                        month: '次月',
                        carrier_product: '5M／次月流量包',
                        product_price: 0.2,
                        num: 33,
                        price: 0.07,
                        qianfee: 7.47
                    },
                    {
                        date: '2018-04-21 12:25:21',
                        liushuinum: '201806211225210081101979',
                        iccid: 8986031642202275661,
                        month: '当月',
                        carrier_product: '10M／月流量包',
                        product_price: 0.2,
                        num: 33,
                        price: 0.07,
                        qianfee: 7.47
                    }
                ]
            }
        },
        methods: {
            dialogColse() {
                this.dialogVisible = false
            }
        },
        components: {
            Pay
        }
    }
</script>

<style scoped lang="scss">
    .tr {
        text-align: right;
    }
    
    .lh33 {
        line-height: 33px;
    }
</style>